<template>
    <article>
        <header>树</header>
        <section>
            <header>颜色</header>
            <div>
                <cv-tree c="tree default medium" :data="data"></cv-tree>
            </div>
        </section>
        <section>
            <header>功能</header>
            <div>
                <cv-tree c="tree default medium" :data="data">
                    <template v-slot="scope">
                        <span>{{scope.node.label + "(L" + scope.level + ")"}}</span>
                    </template>
                </cv-tree>
                <cv-tree c="tree default medium" checkable :data="data" v-model="checkedValues"></cv-tree>
            </div>
        </section>
    </article>
</template>

<script>
    export default {
        name: "ExampleTree",
        data() {
            return {
                checkedValues: [],
                data: [{
                    id: 1,
                    label: "一级1",
                    children: [{
                        id: 11,
                        label: "二级1-1",
                        children: [{
                            id: 111,
                            label: "三级1-1-1"
                        }, {
                            id: 112,
                            label: "三级1-1-2"
                        }]
                    }, {
                        id: 12,
                        label: "二级1-2",
                        children: [{
                            id: 121,
                            label: "三级1-2-1"
                        }, {
                            id: 122,
                            label: "三级1-2-2"
                        }]
                    }]
                }, {
                    id: 2,
                    label: "一级2",
                    children: [{
                        id: 21,
                        label: "二级2-1"
                    }]
                }]
            };
        }
    }
</script>

<style scoped>
    .table {
        margin: 0 5px;
    }
</style>
